<template>
    <div class="main">
        <div class="left" :style="{backgroundColor:themeColor,width:(!isCollapse?'220px':'auto')}">
            <div class="logo"><i class="el-icon-menu"></i>菜单</div>
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    :background-color="themeColor"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :collapse="isCollapse"
                    style="border:none"
                    router
            >
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>账户管理</span>
                    </template>
                    <el-menu-item index="1-1">角色管理</el-menu-item>
                    <el-menu-item index="1-2">账号管理</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-shopping-cart-full"></i>
                        <span>电商管理</span>
                    </template>
                    <el-menu-item index="/layout/ecommerce">京东</el-menu-item>
                    <el-menu-item index="2-2">苏宁</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <!-- 右侧内容 -->
        <div class="right">
            <!-- 顶部导航 -->
            <div class="nav" :style="{backgroundColor:themeColor}">
                <div class="icon" @click="isCollapse=!isCollapse">
                    <i :class="isCollapse? 'el-icon-s-unfold':'el-icon-s-fold'"></i>
                </div>
                <el-menu
                        :default-active="activeIndex"
                        class="el-menu-demo"
                        mode="horizontal"
                        :background-color="themeColor"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                >
                    <el-menu-item index="1"
                    ><i class="el-icon-s-home"></i>Home
                    </el-menu-item
                    >
                    <el-menu-item index="2"
                    ><i class="el-icon-message-solid"></i>Message
                    </el-menu-item
                    >
                    <el-menu-item index="3"
                    ><i class="el-icon-message"></i>Email
                    </el-menu-item
                    >
                    <el-submenu index="4">
                        <template slot="title"><i class="el-icon-view"></i>Theme</template>
                        <el-menu-item
                                @click="themeChange(item.value)"
                                v-for="(item, index) in theme"
                                :key="index"
                        >{{ item.name }}
                        </el-menu-item
                        >
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title"
                        ><i class="el-icon-s-custom"></i>{{ account.name }}
                        </template
                        >
                        <el-menu-item index="5-1">个人中心</el-menu-item>
                        <el-menu-item index="5-2">修改密码</el-menu-item>
                        <el-menu-item index="5-3" @click="exit">退出系统</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <!-- 内容区域 -->
            <div class="centent">
                <!--     路由视图     -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState} from "vuex";

    export default {
        data() {
            return {
                activeIndex: "1",
                //主体颜色:先从浏览器缓存中获取颜色，如果没有则给一个默认值颜色
                themeColor: localStorage.getItem('theme') || "#2376b7",
                //是否折叠左侧菜单栏
                isCollapse: false
            };
        },
        /*生命周期函数*/
        created() {
            //获取当前登录用户的用户名
            let loginId = localStorage.getItem('loginId');
            if (!loginId) {
                this.$router.push('/login');
            }
            //根据用户名获取用户信息
            let rsp = this.$post('/PC/getUserInfo', loginId);
            console.log(rsp);
            this.setAccount(rsp);
        },
        computed: {
            /*导入vuex主题数据*/
            ...mapState("theme", ["theme"]),
            /* 导入vuex登录账户数据 */
            ...mapState("account", ["account"]),
        },
        methods: {
            /*导入vuex登录账户的方法*/
            ...mapState('account', ['setAccount']),
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //切换主题
            themeChange(color) {
                //设置当前的主题颜色
                this.themeColor = color;
                //将当前的主题颜色保存到浏览器的缓存中
                localStorage.setItem('theme', color);
            },
            //退出
            exit() {
                //清除浏览器缓存
                sessionStorage.clear();
                localStorage.clear();
                this.$router.push('/login');
            }
        },
    };
</script>

<style scoped lang="scss">
  .main {
    width: 100vw;
    height: 100vh;
    display: flex;

    .left {
      .logo {
        width: 90%;
        color: white;
        font-size: 18px;
        text-align: center;
        padding: 8px 0;
        border: 1px solid #2376b7;
        margin: 8px auto;
      }
    }

    .right {
      flex: 1;

      .nav {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon {
          padding-left: 3px;

          i {
            color: white;
            font-size: 20px;
          }
        }
      }

      .content {
        padding: 8px;
      }
    }
  }
</style>
